<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
const onPlayWithPlayer = ()=>{
    router.push({path:'/',query:{model:'player'}})
}
const onPlayWithAI = ()=>{
    router.push({path:'/',query:{model:'AI'}})
}
const onPlayOnline = ()=>{
    router.push({path:'/center'})
}
</script>
<template>
    <t-space class="begin-button-box" direction="vertical" align="center">
        <t-button block variant="base" size="large" :onclick="onPlayWithPlayer">人 人 对 战</t-button>
        <t-button block variant="outline" size="large" :onclick="onPlayWithAI">人 机 对 战</t-button>
        <t-button block variant="outline" size="large" :onclick="onPlayOnline">在 线 对 战</t-button>
    </t-space>
</template>
<style>
    .begin-button-box{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>